<script setup lang="ts">
import { reactive, shallowRef, ref, provide } from 'vue';
import formPricker from '@/components/formPricker.vue';
import formDatePricker from '@/components/formDatePricker.vue';
import codeDialog from './components/codeDialog.vue';
import { showImagePreview } from 'vant';
import { useBankList } from './hooks/useBankList';
import { cardBindCardConfirm } from '@/common/api/bankCard';
import { useRouter } from 'vue-router';

const router = useRouter();

// 定义引用
const codeDialogRef = shallowRef<InstanceType<typeof codeDialog>>();
const certEndDateRef = shallowRef<InstanceType<typeof formDatePricker>>();

// 只读状态
const readOnly = ref(false);
provide('readOnly', readOnly);

// 获取银行列表
const { bankList } = useBankList();

const form = reactive({
  card_type: '', // 卡类型,0银行卡,1信用卡
  bank_name: '', // 开户行
  card_id: '', // 银行卡号
  cert_validity_type: '', // 个人证件有效类型
  cert_begin_date: '', // 个人证件有效期开始日期
  cert_end_date: '', // 个人证件有效期截止日期
  cert_id: '', // 证件号
  card_name: '', // 持卡人
  card_mp: '', // 手机号
  expiration: '', // 信用卡有效期
  vip_code: '', // 信用卡安全码
});
const emptyForm = JSON.stringify(form);
const idCardReg = /(^\d{15}$)|(^\d{17}(\d|X|x)$)/;

// 表单提交
const onSubmit = () => {
  codeDialogRef.value?.open();
};

// 验证码提交
const onCodeSubmit = async (codeForm: Record<string, any>) => {
  console.log(codeForm);
  try {
    const res = await cardBindCardConfirm({ ...form, ...codeForm });
    router.back();
    Object.assign(form, JSON.parse(emptyForm));
    console.log('onCodeSubmit: ', res);
  } catch {
    /** empty */
  }
};

// 显示提示图片
const showTipImage = () => {
  showImagePreview(['https://guohua-store.oss-cn-hangzhou.aliyuncs.com/images/upload/bindBankCard/WechatIMG113.jpg']);
};
</script>
<template>
  <div class="bindBankCard">
    <div class="text-sm mt-3 pl-4 mb-3">银行卡信息</div>
    <van-form @submit="onSubmit" class="px-4">
      <van-field
        class="mb-2.5 custom-field"
        input-align="right"
        error-message-align="right"
        v-model.trim="form.card_name"
        :border="false"
        name="card_name"
        label="姓名"
        placeholder="姓名"
        :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <van-field
        class="mb-2.5 custom-field"
        input-align="right"
        error-message-align="right"
        v-model.trim="form.card_mp"
        :border="false"
        name="card_mp"
        type="number"
        maxlength="11"
        label="手机号"
        placeholder="请输入该银行预留手机号"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />
      <van-field
        class="mb-2.5 custom-field"
        input-align="right"
        error-message-align="right"
        v-model.trim="form.cert_id"
        :border="false"
        name="cert_id"
        maxlength="18"
        label="身份证号"
        placeholder="身份证号"
        :rules="[
          { required: true, message: '请填写身份证号' },
          { pattern: idCardReg, message: '身份证号格式错误' },
        ]"
      />
      <form-pricker
        v-model="form.cert_validity_type"
        class="mb-2.5 custom-field"
        input-align="right"
        error-message-align="right"
        label="身份证类型"
        :border="false"
        name="cert_validity_type"
        :columns="[
          { text: '非长期有效', value: '0' },
          { text: '长期有效', value: '1' },
        ]"
      />
      <formDatePricker
        v-model="form.cert_begin_date"
        class="mb-2.5 custom-field"
        input-align="right"
        :border="false"
        error-message-align="right"
        label="身份证有效期开始"
        label-width="130px"
        name="cert_begin_date"
        @onConfirm="
          (value) => {
            certEndDateRef?.setValue(value);
          }
        "
      />
      <template v-if="form.cert_validity_type == '0'">
        <formDatePricker
          ref="certEndDateRef"
          v-model="form.cert_end_date"
          class="mb-2.5 custom-field"
          input-align="right"
          :border="false"
          error-message-align="right"
          label-width="130px"
          label="身份证有效期截止"
          name="cert_end_date"
        />
      </template>
      <van-field
        class="mb-2.5 custom-field"
        input-align="right"
        error-message-align="right"
        v-model.trim="form.card_id"
        :border="false"
        name="card_id"
        label="银行卡号"
        placeholder="银行卡号"
        :rules="[{ required: true, message: '请填写银行卡号' }]"
      />
      <form-pricker
        class="mb-2.5 custom-field"
        v-model="form.card_type"
        ref="cardTypeRef"
        label="银行卡类型"
        :border="false"
        input-align="right"
        error-message-align="right"
        name="card_type"
        :columns="[
          { text: '储蓄卡', value: '0' },
          { text: '信用卡', value: '1' },
        ]"
      />
      <form-pricker
        class="mb-2.5 custom-field"
        v-model="form.bank_name"
        ref="cardTypeRef"
        label="开户行"
        :border="false"
        input-align="right"
        error-message-align="right"
        name="bank_name"
        :columns="bankList"
      />
      <template v-if="form.card_type == '1'">
        <van-field
          class="mb-2.5 custom-field"
          input-align="right"
          error-message-align="right"
          v-model.trim="form.expiration"
          :border="false"
          label-width="110px"
          name="expiration"
          placeholder="信用卡有效期"
          :rules="[{ required: true, message: '请填写信用卡有效期' }]"
        >
          <template #label>
            <div class="flex items-center">
              <span class="mr-1">信用卡有效期</span>
              <van-icon name="question-o" color="#ED347F" @click="showTipImage" />
            </div>
          </template>
        </van-field>
        <van-field
          class="mb-2.5 custom-field"
          input-align="right"
          error-message-align="right"
          v-model.trim="form.vip_code"
          :border="false"
          label-width="110px"
          name="vip_code"
          placeholder="信用卡安全码"
          :rules="[{ required: true, message: '请填写信用卡安全码' }]"
        >
          <template #label>
            <div class="flex items-center">
              <span class="mr-1">信用卡安全码</span>
              <van-icon name="question-o" color="#ED347F" @click="showTipImage" />
            </div>
          </template>
        </van-field>
      </template>

      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit" color="#EC2D69"> 提交 </van-button>
      </div>
    </van-form>
    <!-- 验证码 -->
    <code-dialog ref="codeDialogRef" :form-data="form" @onCodeSubmit="onCodeSubmit" />
  </div>
</template>
<style lang="less">
.custom-field {
  @apply hover:!bg-[#fcf3f8] hover:outline-1 hover:outline hover:outline-[#ED347F];
}
</style>
<style lang="less" scoped>
.bindBankCard {
  :deep(.van-cell) {
    background: #f9f9f9;
    border-radius: 5px;
    padding-top: 13px;
    padding-bottom: 13px;
  }
}
</style>
